<template>
    <div class="home">
        <!-- 顶部导航 -->
        <van-nav-bar title="登录" />

        <van-row type="flex" align="center" class="profile" gutter="20">
            <van-col class="left">
                <van-image
                    round
                    width="60px"
                    height="60px"
                    src="https://img.yzcdn.cn/vant/cat.jpeg"
                />
            </van-col>
            <van-col class="middle">
                <div class="van-ellipsis">
                    rui
                </div>
                <div class="van-ellipsis">
                    个性签名内容
                </div>
            </van-col>
            <van-col class="right" offset="10" span="4">
                <van-icon name="edit" @click="editProfile" />
            </van-col>
        </van-row>
    </div>
</template>

<script>
import avator from '../assets/logo.png';
export default {
    data() {
        return {
            avator,
        };
    },
    methods: {
        editProfile() {
            this.$router.push('/mine');
        },
    },
};
</script>

<style lang="less" scoped>
.home {
    background-color: #f3f3f7;

    .profile {
        padding: 20px;
        .left {
            img {
                width: 45px;
                height: 45px;
                border-radius: 50%;
            }
        }

        .middle {
            .van-ellipsis {
                line-height: 30px;
                font-size: 12px;
            }
        }
    }
}
</style>
